<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header::commonlinks(~{::title},~{::link})">
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" th:href="@{/unauthorize/login.css}">
</head>
<body class="hold-transition sidebar-collapse layout-navbar-fixed layout-top-nav"style="height: 773px">
<div class="wrapper">

    <!-- Navbar -->
    <div th:include="~{common/header::topnavbar-md}"></div>

    <!-- /.navbar -->

    <!-- Main Sidebar Container -->

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">

        <!-- Main content -->
        <div class="content">
            <div class="stars-bg">
                <div id="stars"> </div>
                <canvas id="cvs"></canvas>
            <div class="container register-page" style="position: absolute;opacity: 0.9">
                <div class="register-box">


                    <div class="card">
                        <div class="register-logo">
                            <a href="#"><b>注册</b></a>
                        </div>
                        <div class="card-body register-card-body">
                            <p class="login-box-msg">注册你的专属账号把！</p>

                            <!--th:action="@{/unAuthorize/register}" method="post"-->
                            <form
                                    class="needs-validation validateForm" novalidate th:messageVo="${userRegisterVO}">
                                <input type="text" hidden value="2" name="roleId">
                                <div class="input-group mb-3">
                                    <input type="email" class="form-control" name="email" placeholder="邮箱" required>
                                    <div class="input-group-append">
                                        <div class="input-group-text">
                                            <span class="fas fa-envelope"></span>
                                        </div>
                                    </div>
                                    <div class="invalid-feedback">
                                        请输入合法的邮箱！
                                    </div>
                                </div>
                                <div class="input-group mb-3">
                                    <input type="number" class="form-control" placeholder="验证码6位" name="code" required pattern="\d{6}">
                                    <div class="col-6">
                                        <button type="button" class="btn btn-primary btn-block send-code valid-button">发送验证码</button>
                                    </div>
                                    <div class="input-group-append">
                                    </div>
                                    <div class="invalid-feedback">
                                        验证码不能为空,且必须是6位
                                    </div>
                                </div>

                                <div class="input-group mb-3">
                                    <input type="password" class="form-control" name="password" placeholder="密码"
                                           required id="password1">

                                    <div class="input-group-append">
                                        <div class="input-group-text">
                                            <span class="fas fa-lock"></span>
                                        </div>
                                    </div>
                                    <div class="invalid-feedback equal-validate">
                                        密码不能为空
                                    </div>
                                </div>
                                <div class="input-group mb-3">
                                    <input type="text" class="form-control" name="username" placeholder="用户名" required>
                                    <div class="input-group-append">
                                        <div class="input-group-text">
                                            <span class="fas fa-user"></span>
                                        </div>
                                    </div>
                                    <div class="invalid-feedback ">
                                        用户名不能为空
                                    </div>
                                </div>
                                <div class="input-group mb-3">
                                    <input type="password" class="form-control" placeholder="确认密码" required
                                           id="password2">

                                    <div class="input-group-append">
                                        <div class="input-group-text">
                                            <span class="fas fa-lock"></span>
                                        </div>
                                    </div>
                                    <div class="invalid-feedback equal-validate">
                                        确认密码不能为空
                                    </div>
                                </div>
                                <!-- /.col -->
                                <div class="row">

                                    <!-- /.col -->
                                    <div class="col-12">
                                        <button type="submit" class="btn btn-primary btn-block  valid-button">注册
                                        </button>
                                    </div>
                                    <!-- /.col -->
                                </div>
                            </form>
                            <a th:href="@{/unAuthorize/login}" class="text-center">我已经有账号</a>
                        </div>
                        <!-- /.form-box -->
                    </div><!-- /.card -->
                </div>
                <!-- /.register-box -->
                <!-- 右侧栏 -->
                <div th:include="~{common/header::rightaside}"></div>
                <!-- /右侧栏 -->
                <!-- 底部栏 -->
                <div style="width:70%" th:include="~{common/footer::footer}"></div>
                <!-- /底部栏 -->
                <!--    公有的js-->
                <div th:replace="common/header::commonjs(~{::script})">
                    <!--        私有的js-->
                    <script th:src="@{/admin/article/index.js}"></script>
                    <script th:src="@{/unauthorize/login.js}"></script>
                </div>
            </div><!-- /.container-fluid -->
            </div>
        </div>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

</div>
<!-- ./wrapper -->
<script>
    //注册
    $('.validateForm').off().submit(function () {
        var data=$('.validateForm').serialize();
        $.ajax({
                url: '/unAuthorize/register?'+data,
                type: 'POST',
                dataType: "json",
                // data: ,
                // async: true,
                processData: false,   // 不处理发送的数据
                contentType: false,   // 不设置Content-Type请求头
                success:
                    function (res) {
                        if (res.code == 200) {
                            $.toast({
                                title: '通知',
                                subtitle: '5秒前',
                                content: '注册账号成功',
                                type: 'success',
                                delay: 30000,
                                img: {
                                    src: 'image.png',
                                    class: 'rounded',
                                    title: 'Thumbnail Title',
                                    alt: 'Alternative'
                                },
                                pause_on_hover: false
                            });
                            window.location.href = '/unAuthorize/index';


                        } else {
                            $.toast({
                                title: '通知',
                                subtitle: '5秒前',
                                content: res.msg,
                                type: 'success',
                                delay: 30000,
                                img: {
                                    src: 'image.png',
                                    class: 'rounded',
                                    title: 'Thumbnail Title',
                                    alt: 'Alternative'
                                },
                                pause_on_hover: false
                            });
                        }
                    }
            }
        )
        return false;
    })

    var vercode = 0;
    var time = 60;
    var flag = true;   //设置点击标记，防止60内再次点击生效

    // 发送验证码
    $(".send-code").off().on('click', function () {
        var Value = $("input[name='email']").val();
        if (Value.length != 0) {
            $(".send-code").text("正在发送请稍等");
            if (flag) {
                $(this).attr("disabled", true);

                var timer = setInterval(function () {
                    if (time == 60 & flag) {
                        flag = false;
                        $.ajax({
                            url: '/unAuthorize/register/sendCode?email=' + Value,
                            type: 'get',
                            dataType: "json",
                            async: true,
                            processData: false,   // 不处理发送的数据
                            contentType: false,   // 不设置Content-Type请求头
                            success: function (res) {
                                if(res.code==200)
                                {
                                    $(".send-code").text("已发送");
                                    $.toast({
                                        title: '通知',
                                        subtitle: '1秒前',
                                        content: res.data,
                                        type: 'info',
                                        delay: 20000,
                                        pause_on_hover: false
                                    });
                                }
                                else {
                                    $.toast({
                                        title: '通知',
                                        subtitle: '1秒前',
                                        content: res.msg,
                                        type: 'info',
                                        delay: 20000,
                                        pause_on_hover: false
                                    });
                                }
                            }
                        })

                    } else if (time == 0) {
                        $('.send-code').removeAttr('disabled');
                        $('.send-code').text("发送验证码");
                        clearInterval(timer);
                        time = 60;
                        flag = true;
                    } else {
                        $('.send-code').text(time + "s后重新发送");
                        time--;
                    }
                }, 1000);
            }
        }
    })
</script>
</body>
</html>